import Home from '../pages/Home'
// import About from '../pages/About'
import { Navigate } from 'react-router-dom'
import News from '../pages/News'
import Message from '../pages/Message'
import {lazy, Suspense} from 'react'

// 路由组件懒加载
const About = lazy(() => import('../pages/About'))


/* 
路由表
*/
const routes = [
  {
    path: '/home',
    element: <Home/>,
    children: [
      {
        path: '/home/news',
        element: <News/>
      },
      {
        path: 'message/:id',  // 指定params参数的占位
        element: <Message/>
      },
    ]
  },
  {
    path: '/about',
    // 指定加载中的loading界面
    element: (
      <Suspense fallback={<h1>LOADING...</h1>}>  
        <About/>
      </Suspense>
    )
  },
  {
    path: '/',
    element: <Navigate to='/home'/>
  }
]

export default routes